<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="150px">
      <el-form-item label="Userid" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入客户UserId" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="Customer No" prop="customerNo">
        <el-input v-model="queryParams.customerNo" placeholder="请输入客户号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="PhoneNumber" prop="phoneNumber">
        <el-input v-model="queryParams.phoneNumber" placeholder="请输入客户手机号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="Client Name" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入客户姓名" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="Bank account" prop="bankAccount">
        <el-input v-model="queryParams.bankAccount" placeholder="请输入银行账户号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
       <!-- <el-input v-model="queryParams.status" placeholder="" clearable size="small"
          @keyup.enter.native="handleQuery" /> -->
          <el-select v-model="queryParams.status" placeholder="请选择订单类型" clearable size="small">
            <el-option v-for="dict in statusOptions" :key="dict.key" :label="dict.value"
              :value="dict.key" />
          </el-select>
      </el-form-item>
      <el-form-item label="申请时间" prop="applicationTimeVo">
              <el-date-picker
                @change="timeChange"
                format='yyyy-MM-dd HH:mm:ss'
                value-format='yyyy-MM-dd HH:mm:ss'
                @keyup.enter.native="handleQuery"
                v-model="time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
              </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="订单流水号" prop="serialNo">
        <el-input v-model="queryParams.serialNo" placeholder="请输入订单流水号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="钱包账户号" prop="walletNo">
        <el-input v-model="queryParams.walletNo" placeholder="请输入钱包账户号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="订单类型" prop="orderType">
        <el-select v-model="queryParams.orderType" placeholder="请选择订单类型" clearable size="small">
          <el-option v-for="dict in orderTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请金额" prop="applyAmount">
        <el-input v-model="queryParams.applyAmount" placeholder="请输入申请金额" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单金额" prop="amount">
        <el-input v-model="queryParams.amount" placeholder="请输入订单金额" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单服务费" prop="serviceFee">
        <el-input v-model="queryParams.serviceFee" placeholder="请输入订单服务费" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="钱包类型" prop="walletType">
        <el-select v-model="queryParams.walletType" placeholder="请选择钱包类型" clearable size="small">
          <el-option v-for="dict in walletTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="银行编码" prop="bankCode">
        <el-input v-model="queryParams.bankCode" placeholder="请输入银行编码" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="银行账户" prop="bankAccount">
        <el-input v-model="queryParams.bankAccount" placeholder="请输入银行账户" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="From" prop="fromWhere">
        <el-input v-model="queryParams.fromWhere" placeholder="请输入From" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="To" prop="toDest">
        <el-input v-model="queryParams.toDest" placeholder="请输入To" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="批次流水号" prop="batchSerialNo">
        <el-input v-model="queryParams.batchSerialNo" placeholder="请输入批次流水号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="关联借据" prop="loanSerialNo">
        <el-input v-model="queryParams.loanSerialNo" placeholder="请输入关联借据" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable size="small">
          <el-option v-for="dict in orderStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务费率" prop="serviceRate">
        <el-input v-model="queryParams.serviceRate" placeholder="请输入服务费率" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="余额最低提现金额" prop="minWithdrawBalance">
        <el-input v-model="queryParams.minWithdrawBalance" placeholder="请输入余额最低提现金额" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="奖励金最低提现金额" prop="minWithdrawBonus">
        <el-input v-model="queryParams.minWithdrawBonus" placeholder="请输入奖励金最低提现金额" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-input v-model="queryParams.state" placeholder="请输入状态" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
     <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['wallet:wallet_order:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['wallet:wallet_order:edit']">修改</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="danger" plain  size="mini" :disabled="multiple" @click="adopt()">通过</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain  size="mini" :disabled="multiple" @click="refuse()" >拒绝</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="wallet_orderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectableFun" width="55" align="center" />
      <el-table-column  type="index" />
      <el-table-column label="Userid" align="center" prop="userId" width="300"/>
      <el-table-column label="Customer No" align="center" prop="customerNo" width="200"/>
      <el-table-column label="PhoneNumber" align="center" prop="phoneNumber" width="130"/>
      <el-table-column label="Client name" align="center" prop="clientName" width="280"/>
      <el-table-column label="SerialNo" align="center" prop="serialNo" width="320"/>
      <el-table-column label="withdrawalAmt" align="center" prop="withdrawalAmount" width="130"/>
      <el-table-column label="ServiceFee" align="center" prop="serviceCharge" width="130"/>
      <el-table-column label="Bank account" align="center" prop="bankAccount" width="110"/>
      <el-table-column label="申请时间" align="center" prop="applicationTime" width="170"/>
      <el-table-column label="审核人" align="center" prop="updateName" />
      <el-table-column label="审核状态" align="center" width="110">
        <template slot-scope="scope">
           <span v-if='scope.row.status == 4'>Failed</span>
           <span v-if='scope.row.status == 1'>Approved</span>
           <span v-if='scope.row.status == 2'>Pending</span>
           <span v-if='scope.row.status == 3'>Success</span>
           <span v-if='scope.row.status == 9'>Under review</span>
           <span v-if='scope.row.status == 5'>Retry</span>
           <span v-if='scope.row.status == 6'>Repay pending</span>
           <span v-if='scope.row.status == 7'>Deferred repay pending</span>
          <el-popover
              v-if='scope.row.status == 0'
              placement="bottom"
              title=""
              width="200"
              trigger="click"
              :content="scope.row.remark">
              <span slot="reference" style="cursor: pointer;">Rejected</span>
            </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
        <template slot-scope="scope" v-if='scope.row.status == 9'>
          <el-button size="mini" type="text"  @click="adopt(scope.row)">通过</el-button>
          <el-button size="mini" type="text"  @click="refuse(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 审核拒绝对话框 -->
    <el-dialog v-loading='refuseLoading' :close-on-click-modal='false' :show-close="false" :title="title" class="Approval_msg" :visible.sync="open" width="500px" append-to-body>
      <div class="margin-Btm25">
        是否确定要审核拒绝？
      </div>
      <el-input
        type="textarea"
        :rows="4"
        maxlength="500"
        placeholder="请输入审核拒绝原因"
        v-model="reason">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" :disabled="reason == ''" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { Financial_list,examine } from "@/api/wallet/wallet_Approval";
  import {mapGetters} from 'vuex'
  export default {
    name: "Wallet_Approval",
    components: {},
    data() {
      return {
        refuseLoading:false,
        statusOptions:[
          {key:0,value:'Rejected'},
          {key:1,value:'Approved'},
          {key:2,value:'Pending'},
          {key:3,value:'Success'},
          {key:4,value:'Failed'},
          {key:5,value:'Retry'},
          {key:6,value:'Repay pending'},
          {key:7,value:'Deferred repay pending'},
          {key:9,value:'Under review'},
        ],
        rows:[],
        //拒绝原因
        reason:'',
        time:"",
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        serialNos:'',
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 钱包订单表格数据
        wallet_orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 订单类型字典
        orderTypeOptions: [],
        // 钱包类型字典
        walletTypeOptions: [],
        // 订单状态字典
        orderStatusOptions: [],
        // 状态字典
        stateOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId:'',
          customerNo:'',
          phoneNumber:'',
          name:'',
          bankAccount:'',
          applicationTimeVo:'',
          status:'',
          startTime:"",
          endTime:"",


          // serialNo: null,
          // walletNo: null,
          // custNo: null,
          // orderType: null,
          // applyAmount: null,
          // amount: null,
          // serviceFee: null,
          // walletType: null,
          // bankCode: null,
          // bankAccount: null,
          // fromWhere: null,
          // toDest: null,
          // batchSerialNo: null,
          // loanSerialNo: null,
          // orderStatus: null,
          // serviceRate: null,
          // minWithdrawBalance: null,
          // minWithdrawBonus: null,
          // state: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          // serialNo: [{
          //   required: true,
          //   message: "订单流水号不能为空",
          //   trigger: "blur"
          // }],
          // walletNo: [{
          //   required: true,
          //   message: "钱包账户号不能为空",
          //   trigger: "blur"
          // }],
          // custNo: [{
          //   required: true,
          //   message: "客户号不能为空",
          //   trigger: "blur"
          // }],
          // orderType: [{
          //   required: true,
          //   message: "订单类型不能为空",
          //   trigger: "change"
          // }],
          // amount: [{
          //   required: true,
          //   message: "订单金额不能为空",
          //   trigger: "blur"
          // }],
          // walletType: [{
          //   required: true,
          //   message: "钱包类型不能为空",
          //   trigger: "change"
          // }],
          // state: [{
          //   required: true,
          //   message: "状态不能为空",
          //   trigger: "blur"
          // }],
          // createTime: [{
          //   required: true,
          //   message: "创建时间不能为空",
          //   trigger: "blur"
          // }],
        }
      };
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar',
        'device',
        'name',
        'email'
      ]),
    },
    created() {
      this.getList();
      // this.getDicts("wallet_order_type").then(response => {
      //   this.orderTypeOptions = response.data;
      // });
      // this.getDicts("wallet_type").then(response => {
      //   this.walletTypeOptions = response.data;
      // });
      // this.getDicts("wallet_order_status").then(response => {
      //   this.orderStatusOptions = response.data;
      // });
      // this.getDicts("state").then(response => {
      //   this.stateOptions = response.data;
      // });
    },
    methods: {
      selectableFun(row){
          if(row.status == 9){
              return true
          }else{
              return false
          }
      },
      statusTypeFormat(row, column) {
        switch (row.status){
          case '0':
            return 'Rejected'
            break;
          case '1':
            return 'Approved'
            break;
          case '2':
            return 'Pending'
            break;
          case '3':
            return 'Success'
            break;
          case '4':
            return 'Failed'
            break;
          case '5':
            return 'Retry'
            break;
          case '6':
            return 'Repay pending'
            break;
          case '7':
            return 'Deferred repay pending'
            break;
          case '9':
            return 'Under review'
            break;
          default:
            break;
        }
      },
      timeChange(){
        if(this.time.length != 0){
          this.queryParams.startTime = this.time[0]
          this.queryParams.endTime = this.time[1]
        }
      },
      /** 查询钱包订单列表 */
      getList() {
        this.loading = true;
        Financial_list(this.queryParams).then(response => {
          this.wallet_orderList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 订单类型字典翻译
      orderTypeFormat(row, column) {
        return this.selectDictLabel(this.orderTypeOptions, row.orderType);
      },

      // 订单状态字典翻译
      orderStatusFormat(row, column) {
        return this.selectDictLabel(this.orderStatusOptions, row.orderStatus);
      },
      // 状态字典翻译
      stateFormat(row, column) {
        return this.selectDictLabel(this.stateOptions, row.state);
      },
      // 取消按钮
      cancel() {
        // this.open = false;
        // this.reset();
      },
      // 表单重置
      reset() {
        // this.form = {
        //   id: null,
        //   serialNo: null,
        //   walletNo: null,
        //   custNo: null,
        //   orderType: null,
        //   applyAmount: null,
        //   amount: null,
        //   serviceFee: null,
        //   walletType: null,
        //   bankCode: null,
        //   bankAccount: null,
        //   fromWhere: null,
        //   toDest: null,
        //   batchSerialNo: null,
        //   loanSerialNo: null,
        //   orderStatus: null,
        //   serviceRate: null,
        //   minWithdrawBalance: null,
        //   minWithdrawBonus: null,
        //   state: null,
        //   remark: null,
        //   createBy: null,
        //   createTime: null,
        //   updateBy: null,
        //   updateTime: null
        // };
        // this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        console.log(this.time,'timeitii')
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.serialNos = selection.map(item => item.serialNo)
        this.serialNos =this.serialNos.toString()
        console.log(this.serialNos)
        this.rows = selection
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加钱包订单";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getWallet_order(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改钱包订单";
        });
      },
      /** jujue */
      submitForm() {
        this.refuseLoading = true
        const rowInfo = this.serialNos
        const params= {
          updateName:this.name,
          serialNoArray:rowInfo,
          refusalReason:this.reason,
          approval:'0',
        }
        examine(params).then(response => {
          this.refuseLoading = false
          this.open = false;
          this.reason = ''
          this.msgSuccess("修改成功");
          this.getList();
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除钱包订单编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delWallet_order(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },
      refuse(row){
        this.open = true
        this.reason =  ''
        this.serialNos = row.serialNo || this.serialNos
      },
      // 通过
      adopt(row){
        // const ids = row.id || this.ids;
        var main = this
        var rowInfo
        if(row != undefined){
          rowInfo = row.serialNo
        }else{
          rowInfo = this.serialNos
        }
        const params= {
          updateName:this.name,
          serialNoArray:rowInfo,
          // refusalReason:'',
          approval:'1',
        }
        // const queryParams = this.queryParams;
        this.$confirm('是否确认要审核通过?', "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass:'Approval_msg',
          showClose: false,
          closeOnClickModal:false,
        }).then(function() {
          examine(params).then(response => {
            main.msgSuccess("修改成功");
            main.getList();
          });
        }).then(response => {
          this.getList();
        })
      },
    }
  };
</script>
<style type="text/css">
  .Approval_msg .el-message-box__content{
    text-align: center;
    font-weight: bold;
  }
  .Approval_msg .el-message-box__header{
    padding-bottom: 30px;
  }
  .Approval_msg .el-message-box__btns{
    text-align: center;
    padding-top: 15px;
  }
  .Approval_msg .el-message-box__btns .el-button--small{
    padding: 10px 45px;
    color:#2C3C3C;
    border-radius: 6px;
  }
  .Approval_msg .el-message-box__btns .el-button--small:first-child{
    border: 1px solid #707070;
  }
  .Approval_msg{
    padding-bottom: 50px;
    border-radius: 10px;
  }

  .Approval_msg .el-dialog{
    padding-bottom: 0px;
    border-radius: 10px;
  }
  .Approval_msg .el-dialog .el-dialog__body{
    text-align: center;
    font-weight: bold;
  }
  .Approval_msg .el-dialog .el-dialog__header{
    padding-bottom: 0px;
  }
  .Approval_msg .el-dialog .el-dialog__footer{
    text-align: center;
    padding-top: 15px;
  }
  .Approval_msg .el-dialog__footer .dialog-footer .el-button{
    padding: 10px 45px;
    color:#2C3C3C;
    border-radius: 6px;
  }
  .Approval_msg .el-dialog__footer .dialog-footer .el-button:first-child{
    border: 1px solid #707070;
  }
  .Approval_msg .el-dialog:not(.is-fullscreen){
    margin-top: 30vh !important;
  }
  .margin-Btm25{
    margin-bottom: 25px;
  }
</style>
